<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .mtk{
            width: 400px;
            height: 250px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: none;
        }
       .mtk span {
            position: absolute;
            right: 5px;
            top: 5px;
        }
        th,td{
            width: 150px;
            height: 50px;
            background-color: red;
            border: 1px solid black;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <button onclick="show()">添加数据</button>
    <div class="mtk">
    <h1>添加数据</h1>
    <p>id:<input type="text" class="c"></p>
   <p> 课程名称:<input type="text" class="a"></p>
   <p> 所属学院:<input type="text" class="b"></p>
   <button onclick="add()">添加</button>
   <span onclick="hide()">×</span>
</div>
<table cellspacing="0">
    <thead>
        <tr>
            <th>id</th>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        <tbody>
       
        </tbody>
    </thead>
</table>
</body>
</html>
<script>
    var mtk=document.querySelector('.mtk')
    var name=document.querySelector('.a')
    var school=document.querySelector('.b')
    var id=document.querySelector('.c')
    var tbody=document.querySelector('tbody')
  function show(){
    mtk.style.display='block'
  }
  function hide(){
    mtk.style.display='none'
  }
  function add(){
    // 输入验证
    if (id.value === "" || name.value === "" || school.value === "") {
        alert("请输入完整信息");
        return;
    }
    var tr=document.createElement('tr')
    tr.innerHTML=`
                <td>${id.value}</td>
                <td>${name.value}</td>
                <td>${school.value}</td>
                <td><a href="" onclick='sc(this)'>删除</a></td>
                
    `;
    tbody.appendChild(tr)
}
function sc(aaa){
    // 确认删除
    if (confirm("确定要删除吗？")) {
        tbody.removeChild(aaa.parentNode);
    }
}
</script>